<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <table border='1px' width='300px' cellspacing='0'>
            <thead>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </thead>
            <tbody id="tbody">
                
            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    var arr = [
        {
            name: '张三',
            age: 18,
            gender: '男'
        }, {
            name: '貂蝉',
            age: 20,
            gender: '女'
        }, {
            name: '元歌',
            age: 22,
            gender: '男'
        }
    ]
    var tbody = document.querySelector('#tbody')
    function creatTable() {
        //每次执行函数时，清空tbody内容，重新渲染页面
        tbody.innerHTML = ""
        //创建行
        for (let i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            //创建列
            for (k in arr[i]) {
                var td = document.createElement('td')
                tr.appendChild(td)
                td.innerText = arr[i][k]
            }
            //创建最后一列删除按钮
            var lastTd = document.createElement('td')
            tr.appendChild(lastTd)
            var btn = document.createElement('button')
            lastTd.appendChild(btn)
            //btn.index = i      如果不用let i，用var i则需要使用该方法保存一个自定义变量用来匹配列表行
            btn.innerText = '点我删除'
            btn.onclick = function () {
                //arr.splice(this.index, 1)   如果不用let i，用var i则需要使用该方法删除数组元素
                arr.splice(i, 1)
                //使用删除后的数组重新渲染页面
                creatTable(arr)
            }
        }
    }
    creatTable()
</script>


<!-- 重点： 
1.  for循环中如果不用let变量的话，需要将i赋值给按钮自定义变量储存（63），并且后续需要使用this来调用（66）。      
2. （65）点击事件中，触发删除数组后需要重新调用函数以达到重新渲染的目的。
3. （47）执行渲染代码时需要先清除下之前的内容，否则重新执行代码会造成重复渲染。 
4. （53）for in 循环会用key来遍历所有对象的值，通过 对象.[k]可以依次访问所有的值
-->


<!-- 拓展：
1.  可以增加点击按钮确认删除功能
2.  可以通过循环控制渲染行背景颜色等样式
3.  可以通过委托事件来书写点击点击事件
4.  可以通过if判断是否存在表单来达到渲染前清除表单的目的 -->


<!-- 4.
var isTable = document.getElementById('tb')
    if(isTable){
        //说明dom中已经有了一个table 把它移除掉
        isTable.parentNode.removeChild(isTable)     
    }
var table = document.createElement("table");
table.id = "tb";//设置一个id属性 -->